<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        
        input[type=text] {
            height: 20px;
            line-height: 20px;
            border: 1px solid #aaa;
            border-radius: 2px;
            font-size: 12px;
            position: relative;
            z-index: 2;
            background-color: transparent;
        }

        .pl-wp {
            position: relative;
        }

        .pl-wp .pl {
            position: absolute;
            top: 4px;
            left: 2px;
            color: #a9a9a9;
            font-size: 12px;
            z-index: 1;
        }
    </style>
</head>
<body>

    <fieldset>

        <legend>文字</legend>

        <input type="text" placeholder="test">

    </fieldset>

    <div id="testDiv">test</div>

    <input type="radio">

    <input type="text" placeholder="请输入账号">

    <hr>

    <input id="myTxt" type="text">

    <hr>

    <input type="text" placeholder="请输入年龄">

    <script>

    function fixPlaceholder() {
        var input = document.createElement('input');

        if ('placeholder' in input) {
            return;
        }

        doFix();

    }

    function doFix() {
        var ipts = document.getElementsByTagName('input'),
            i = 0, len = ipts.length;

        for (; i<len; i++) {
            if (ipts[i].type == 'text' && ipts[i].placeholder) { // ?
                ipts[i].outerHTML = '<span class="pl-wp">' + ipts[i].outerHTML + '<span class="pl">' + ipts[i].placeholder + '</span></span>';

                ipts[i].onkeyup = onIptKeyup;
            }
        }

        function onIptKeyup() {
            var val = this.value,
                pl = this.parentNode.getElementsByTagName('span')[0];

            if (val == '') {
                pl.style.display = 'block';
            } else {
                pl.style.display = 'none';
            }
        }

        // console.log(iptsArr)

    }

    fixPlaceholder();

    //////////////////////////////////////////////////////////////////////


        // function fixPlaceholder() {

        //     var ipt = document.createElement('input'),
        //             i, len,
        //             plhInfo, span, input;

        //     if ('placeholder' in ipt) {
        //         return;
        //     }

        //     input = document.getElementsByTagName('input');
        //     len = input.length;

        //     for (i=0; i<len; i++) {
        //         plhInfo = input[i].getAttribute('placeholder');

        //         if (input[i].type != 'text' || !plhInfo) {
        //             continue;
        //         }

        //         input[i].outerHTML = '<div class="plh-wp">' + input[i].outerHTML + '<span></span></div>';

        //         span = input[i].parentNode.getElementsByTagName('span')[0];

        //         span.innerHTML = plhInfo;

        //         input[i].onkeyup = function() {
        //             var val = this.value;
        //             if (val.length == 0) {
        //                 this.parentNode.getElementsByTagName('span')[0].style.display = 'block';
        //             } else {
        //                 this.parentNode.getElementsByTagName('span')[0].style.display = 'none';
        //             }
        //         };

        //         // console.log(input[i].parentNode.getElementsByTagName('span')[0]);

        //     }

        // }

        // fixPlaceholder();
    </script>
</body>
</html>